<script setup>
import { ref, reactive } from 'vue';
import { useUserStore } from '@/stores/counter';
import { useRouter } from "vue-router";
import { getApply } from '@/api/apply';
import { getStaff } from '@/api/staff';
import { editApply } from '@/api/apply'
import { getNode } from '@/api/node'
import DetailsApply from '@/components/DetailsApply.vue';
import AgreeDialog from '@/components/AgreeDialog.vue'
import { showMessage,timestampToTime } from '@/public/public'

import icon_1 from '@/assets/images/header_icon_01.png'
import icon_2 from '@/assets/images/header_icon_02.png'
import icon_3 from '@/assets/images/header_icon_03.png'
import icon_4 from '@/assets/images/header_icon_04.png'
import icon_5 from '@/assets/images/header_icon_05.png'
import icon_6 from '@/assets/images/header_icon_06.png'
import icon_7 from '@/assets/images/header_icon_07.png'
import icon_8 from '@/assets/images/header_icon_08.png'


const userStore = useUserStore();

const router = useRouter();


const headerTitles = reactive([{
  id: 0,
  title: '请假申请',
  icon: icon_1,
  setcolor: 'setcolor_1'
}, {
  id: 1,
  title: '加班申请',
  icon: icon_2,
  setcolor: 'setcolor_2'
}, {
  id: 2,
  title: '补卡申请',
  icon: icon_3,
  setcolor: 'setcolor_3'
}, {
  id: 3,
  title: '出差申请',
  icon: icon_4,
  setcolor: 'setcolor_4'
}, {
  id: 4,
  title: '离职申请',
  icon: icon_5,
  setcolor: 'setcolor_5'
}, {
  id: 5,
  title: '招聘申请',
  icon: icon_6,
  setcolor: 'setcolor_6'
}, {
  id: 6,
  title: '经费预算申请',
  icon: icon_7,
  setcolor: 'setcolor_7'
}, {
  id: 7,
  title: '我的任务',
  icon: icon_8,
  setcolor: 'setcolor_8'
}])



let tableData = reactive([]);

// 获取申请列表的数据
(function () {
  const ops = {}
  ops.token = userStore.userMsg.token
  getApply(ops).then(res => {
    res.data.data.forEach(val => {
      let index;
      headerTitles.some((v, ind) => {
        index = ind
        return val.applyType === v.id
      })
      val.applyTypeShow = headerTitles[index].title
      // 审批状态 0审批中 1已通过 2已拒绝
      val.state = val.approveState === 0 ? "待审批" : val.approveState === 1 ? "已通过" : "已拒绝"
    })
    tableData.push(...res.data.data)
    console.log(tableData)
  })
}
)()


let infoData = reactive([]);
//公告
getNode(userStore.userMsg.token).then(res => {
  console.log('===++++====', res);
  if (res.data.code === 1) {
    if (res.data.data) {
      res.data.data.forEach(val => {
        infoData.push({
          title: val.title,
          content:val.content,
          time:timestampToTime(val.sendTime)
        })
      })
    }
  }else{

  }
});


function clickEnter(id) {

  // if (id === 1) {
  //   router.push({ name: 'apply' });
  // } else if (id === 2 || id === 3 || id === 4 || id === 5 || id === 6) {
  //   router.push({ name: 'apply' });
  // } else {
  //   router.push({ name: 'apply' });
  // }
  if (id === 7) {
    router.push({ path: '/mytask' })
  } else {
    router.push({ name: 'apply', params: { id } });
  };

  // router.push()

}
const rowData = ref({})
const dialogFormDetails = ref(false);
function isShow(val) {
  dialogFormDetails.value = val
}
function handleEdit(ind, row) {
  dialogFormDetails.value = true
  rowData.value = row
}



let curData = reactive({})
const dialogFormDetailsAgree = ref(false);
function isShowAgree(val) {
  dialogFormDetailsAgree.value = val

}
function handleDelete(ind, row) {
  dialogFormDetailsAgree.value = true
  curData = row;
}

function modifyData(data) {

  console.log('=====----====', data);


  const obj = {
    token: userStore.userMsg.token,
    approveState: data.approveState,
    applyId: data.applyId,
    approveRemark: data.approveRemark
  }

  editApply(obj).then(res => {
    if (res.data.code === 1) {
      showMessage(res.data.msg, 'success', 2000);

      location.reload();

    } else {
      showMessage(res.data.msg, 'error', 2000);
    }
  });

}

</script>

<template>
  <div>

    <div class="home-welcome">👏 上午好，{{ userStore.userMsg.username }}</div>

    <div class="header-header">
      <header class="home-header-left">
        <div class="home-header-left-first-title">快捷入口</div>
        <ul class="home-header-left-box">
          <li v-for="item in headerTitles" :key="item.id" class="home-header-left-li" @click="clickEnter(item.id)">
            <div class="header-button-bg" :class="item.setcolor">
              <img :src="item.icon" alt="" class="header-button-icon">
            </div>
            <p class="header-button-text"> {{ item.title }} </p>
          </li>
        </ul>
      </header>

      <div class="main-right">
        <div class="home-header-right-third-title">信息公告</div>
        <dl v-for="item in infoData" class="main-right-dl">
          <dt class="right-dl-title"><span></span> {{ item.title }} </dt>
          <dd class="right-dl-content"> {{ item.content }} </dd>
          <dd class="right-dl-time"> {{ item.time }} </dd>
          <i></i>
        </dl>
      </div>

    </div>


    <main class="home-main">

      <div class="main-left">
        <div class="home-header-left-second-title">办公列表</div>
        <el-table :data="tableData" border style="width:100%" empty-text="暂无办公列表数据" :cell-style="{ padding: '5px 0' }">
          <el-table-column prop="applyTypeShow" label="办公类型" width="100" align="center" />
          <el-table-column prop="sendPeople" label="发起人" width="100" align="center" />
          <el-table-column prop="title" label="申请标题" width="100" align="center" />
          <el-table-column prop="content" label="申请原因" width="100" align="center" />
          <el-table-column prop="approvePeople" label="审批人" width="100" align="center" />
          <el-table-column prop="state" label="状态" align="center" />
          <el-table-column label="操作" width="110" align="center">
            <template #default="scope">
              <el-button type="primary" link @click="handleEdit(scope.$index, scope.row)"
                class="el-btn-edit">详情</el-button>
              <el-button type="primary" link @click="handleDelete(scope.$index, scope.row)"
                class="el-btn-delete">审批</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>


      <el-dialog v-model="dialogFormDetails" :show-close="false" :key="101">
        <DetailsApply :dialogFormDetails="dialogFormDetails" @isShow="isShow" :rowData="rowData">
        </DetailsApply>
      </el-dialog>

      <AgreeDialog :dialogFormDetailsAgree="dialogFormDetailsAgree" @isShowAgree="isShowAgree" :curData="curData"
        @modifyData="modifyData">
      </AgreeDialog>


    </main>


    <div style="height: 200px;"></div>


  </div>
</template>

<style>
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

dl {
  list-style: none;
}

.header-header {
  display: flex;
}

.home-welcome {
  height: 20px;
  font-size: 16px;
  font-weight: bolder;
  line-height: 20px;
  margin-bottom: 10px;
  color: var(--el-color-primary);
}

.home-header-left {
  width: 400px;
  height: 280px;
  border: 0;
  border-radius: 10px;
  background-color: #f6f6f6;
  margin-bottom: 10px;
  margin-top: 10px;
}

.home-header-left-first-title {
  padding: 10px 0 0 15px;
  font-size: 14px;
}

.home-header-left-second-title {
  padding: 10px 0 10px 10px;
  font-size: 14px;
}

.home-header-left-box {
  padding: 10px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.home-header-left-li {
  width: 90px;
  height: 100px;
  cursor: pointer;
}

.header-button-bg {
  border: 0;
  border-radius: 15px;
  width: 60px;
  height: 60px;
  background-color: #e3e3e3;
  /* cursor: pointer; */
  margin: 0 auto;
  position: relative;
}

.setcolor_1,
.setcolor_8 {
  background-color: #d1f5ea;
}

.setcolor_2,
.setcolor_5 {
  background-color: #fedbdb;
}

.setcolor_3 {
  background-color: #fff3cc;
}

.setcolor_4,
.setcolor_7 {
  background-color: #dbdcfc;
}

.setcolor_6 {
  background-color: #cbd7fb;
}

.header-button-icon {
  width: 20px;
  height: 20px;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  top: 20px;
  bottom: 20px;
}

.header-button-text {
  width: 100%;
  height: 20px;
  margin: 5px 0;
  font-size: 13px;
  text-align: center;
  color: #666;
  /* cursor: pointer; */
}

.main-left {
  width: 700px;
}

.main-right {
  width: 400px;
  border-radius: 15px;
  margin-left: 40px;
  margin-top: 10px;
  max-height: 300px;
  background-color: rgba(52, 136, 255, 0.06);
  overflow: hidden;
}

.home-header-right-third-title {
  padding: 10px 0 10px 15px;
  font-size: 16px;
}

.main-right-dl {
  cursor: pointer;
}

.right-dl-title {
  font-size: 13px;
  height: 20px;
  line-height: 20px;
  margin-left: 8px;
  color: #333;
  font-weight: bold;
  width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.right-dl-title span {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 7px;
  background-color: #888;
}

.right-dl-content {
  font-size: 12px;
  /* transform: scale(0.8); */
  margin-left: 20px;
  line-height: 16px;
  color: #666;
  width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.right-dl-time {
  width: 200px;
  font-size: 12px;
  line-height: 14px;
  /* transform: scale(0.8); */
  margin-left: 20px;
  color: #999;
}

.main-right-dl i {
  display: block;
  margin: 0 18px;
  background-color: #e2e2e2;
  height: 1px;
}


.yyyyyy {
  background-color: deeppink;
}
</style>